//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import React, {
	PureComponent,
	Fragment
} from 'react';
import ReactDOM from 'react-dom';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import ExportJsonExcel from 'js-export-excel';
//import * as XLSX from 'xlsx';
import XLSX from 'xlsx/dist/xlsx.full.min';
//import * as XLSX from 'xlsx-style';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { getNodeByNameAndCallbackProcess } from '@/components/_utils/algorithmTools';
import {
	Row,
	Col,
	Card,
	Form,
	Input,
	Select,
	Icon,
	Button,
	Modal,
	message,
	Divider,
	Table,
	Tag,
	Tooltip 
} from 'antd';
import { Resizable } from 'react-resizable';
//import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';


import styles from './StaffInfoList.less';
import {getValue} from '@/utils/globalcommon';
import {initTotalList} from '@/utils/globalcommon';
const FormItem = Form.Item;
const { Option } = Select;
const { confirm } = Modal;

const ResizeableTitle = props => {
  const { onResize, width, ...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

//用户列表

class StandardTable extends PureComponent {
	
constructor(props) {
    super(props);
    const { columns } = props;
    const needTotalList = initTotalList(columns);
    this.state = {
      selectedRowKeys: [],
      needTotalList,
      columns: columns
    };
}


componentDidMount() {
	const { downloadExcel } = this.props;
	
	const tableCon = ReactDOM.findDOMNode(this.refs['table']);
    const table = tableCon.querySelector('table');
    table.setAttribute('id','table-to-xls');
    downloadExcel(tableCon);
}

components = {
    header: {
      cell: ResizeableTitle,
    },
};

handleResize = index => (e, { size }) => {
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      return { columns: nextColumns };
    });
};

static getDerivedStateFromProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      const needTotalList = initTotalList(nextProps.columns);
      return {
        selectedRowKeys: [],
        needTotalList,
      };
    }
    return null;
}




handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    let { needTotalList } = this.state;
    needTotalList = needTotalList.map(item => ({
      ...item,
      total: selectedRows.reduce((sum, val) => sum + parseFloat(val[item.dataIndex], 10), 0),
    }));
    const { onSelectRow } = this.props;
    if (onSelectRow) {
      onSelectRow(selectedRows);
    }

    this.setState({ selectedRowKeys, needTotalList });
};

handleTableChange = (pagination, filters, sorter) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(pagination, filters, sorter);
    }
};

cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
};

render() {
    const { selectedRowKeys, needTotalList } = this.state;
    const { data = {}, rowKey, ...rest } = this.props;
    const { list = [], pagination } = data;
	const columns = this.state.columns.map((col, index) => ({
      ...col,
      onHeaderCell: column => ({
        width: column.width,
        onResize: this.handleResize(index),
      }),
    }));
    
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      current:pagination? pagination.currentPage : 1,
      ...pagination,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.standardTable}>
        <Table
          ref='table'
          rowKey={rowKey || 'key'}
          rowSelection={rowSelection}
          dataSource={list}
          bordered 
          pagination={paginationProps}
          onChange={this.handleTableChange}
          {...rest}
          size="middle"
          components={this.components} 
          columns={columns}
          scroll={{x: 'max-content'}}
          onRow={record => {
		    return {
		      onClick: event => {
		      	event.stopPropagation();
		      	router.push({
				  pathname: '/staff/updatestaff',
				  query: {
				    id: record.id,
				  },
				});
		      }, // 点击行
		    };
		  }}
        />
      </div>
    );
}
}



	function download(json,fileName){
	    const type = 'xlsx'//定义导出文件的格式
	    var tmpDown;//导出的内容
	    var tmpdata = json[0];
	    json.unshift({});
	    var keyMap = []; //获取keys
	    for (var k in tmpdata) {
	        keyMap.push(k);
	        json[0][k] = k;
	    }
	    var tmpdata = [];//用来保存转换好的json 
	    
	    json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
	        v: v[k],
	        position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
	    }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
	        v: v.v
	    });
	    var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
	    var tmpWB = {
	        SheetNames: ['mySheet'], //保存的表标题
	        Sheets: {
	            'mySheet': Object.assign({},
	                tmpdata, //内容
	                {
	                    '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
	                })
	        }
	    };
	    tmpDown = new Blob([s2ab(XLSX.write(tmpWB, 
	        {bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型
	        ))], {
	        type: ""
	    }); //创建二进制对象写入转换好的字节流
	    saveAs(tmpDown,fileName);
	}
	
	function saveAs(obj, fileName){//导出功能实现
	    var tmpa = document.createElement("a");
	    tmpa.download = fileName || "下载";
	    tmpa.href = URL.createObjectURL(obj); //绑定a标签
	    tmpa.click(); //模拟点击实现下载
	    setTimeout(function () { //延时释放
	        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
	    }, 100);
	}
	
	function s2ab(s){ //字符串转字符流
	    var buf = new ArrayBuffer(s.length);
	    var view = new Uint8Array(buf);
	    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
	    return buf;
	}
	
	function getCharCol(n){
	    let temCol = '',
	    s = '',
	    m = 0
	    while (n > 0) {
	        m = n % 26 + 1
	        s = String.fromCharCode(m + 64) + s
	        n = (n - m) / 26
	    }
	    return s
	}

/* eslint react/no-multi-comp:0 */
@connect(({
	prostaff,
	loading
}) => ({
	prostaff,
	loading: loading.models.prostaff,
}))

@Form.create()
class ProStaffList extends PureComponent {

	state = {
		ref:this.props.attr,  // 从父组件获取参数判断该table是否需要导出
		modalVisibleByJobColumn: false,
		modalVisible: false,
		updateModalVisible: false,
		viewModalVisible: false,
		expandForm: false,
		selectedRows: [],
		formValues: {},
		updateFormValues: {},
		viewFormValues: {},
		requestModelName:"prostaff",
		currentPage: 1,
		pageSize: 10,
		table: null,
        addButtonVisible: 1,
        updateButtonVisible: 1,
        deleteButtonVisible: 1,
        dataNew:  [
        	{id:'1',name:'姓名',sort: 1},
        	{id:'2',name:'部门',sort: 2},
        	{id:'3',name:'入职日期',sort: 3},
        	{id:'4',name:'手机',sort: 4},
        ],
        dataTemp: [],
        dataOption:  [
        	{id:'5',name:'性别',sort: 1},
        	{id:'6',name:'护照号',sort: 2},
        	{id:'7',name:'出生日期',sort: 3},
        	{id:'8',name:'属相',sort: 4},
        	{id:'9',name:'年龄',sort: 5},
        	{id:'10',name:'星座',sort: 6}
        ],
		
	};

	columns = [
		{
	        title: '姓名',
	        dataIndex: 'pname',
	        key: 'pname',
	        width: 200,
	        sorter: (a, b) => {
	        	if(!a.pname || !b.pname) return;
	        	a.pname.length - b.pname.length;
	        },
        }, {
	        title: '手机',
	        dataIndex: 'phone',
	        key: 'phone',
	        sorter: (a, b) => {
	        	if(!a.phone || !b.phone) return;
	        	a.phone.length - b.phone.length;
	        }
        },  {
	        title: '邮箱',
	        dataIndex: 'email',
	        key: 'email',
	        sorter: (a, b) => {
	        	if(!a.email || !b.email) return;
	        	a.email.length - b.email.length;
	        },
        },  {
	        title: '部门',
	        dataIndex: 'dept',
	        key: 'dept',
	        sorter: (a, b) => {
	        	if(!a.dept || !b.dept) return;
	        	a.dept.length - b.dept.length;
	        }
        }, 	{
	        title: '岗位',
	        dataIndex: 'post_name',
	        key: 'post_name',
	        sorter: (a, b) => {
	        	if(!a.post_name || !b.post_name) return;
	        	a.post_name.length - b.post_name.length;
	        }
        }, {
	        title: '创建时间',
	        dataIndex: 'time',
	        key: 'time',
	        sorter: (a, b) => {
	        	if(!a.time || !b.time) return;
	        	a.time.length - b.time.length;
	        },
	        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
        }, 	{
			title: '操作',
			fixed:'right',
			align: 'center',
    		width: 160,
			render: (text, record) => {
	        	const { updateButtonVisible,deleteButtonVisible } = this.state;
	        	return (
		        	<Fragment>
		        	
					    {deleteButtonVisible == 1?(
					    	<Button  type="danger" icon="delete" 
					    		onClick={(event) => {
					    			event.stopPropagation();
					    			this.handleDeleteRecord(record);
					    		}}>
					    	</Button>
					    ):null}
					    
				    </Fragment>
	        	);
	    	
			}
		},
	];
	
	
	downloadExcel = (ele)=> {
		const table = ele.querySelector('#table-to-xls');
		this.setState({
			table: table
		})
	}
//	downloadExl = () => {
//		const {
//			prostaff: {
//				data,
//			},
//		} = this.props;
//		if(!data) return false;
//	    let json = data.list.map(item=> { //将json数据的键名更换成导出时需要的键名
//	        return {
//	            '姓名' :item.pname,
//	            '手机' : item.phone,
//	            '邮箱': item.email//将类型代号转为汉字
//	        }
//	    })
//	    download(json,'人员信息333.xlsx')//导出的文件名
//	}

	  	
  	//导入excel
	onImportExcel = file => {
	    // 获取上传的文件对象
	    const { files } = file.target;
	    const { dispatch } = this.props;
	    // 通过FileReader对象读取文件
	    const fileReader = new FileReader();
	    fileReader.onload = event => {
	        try {
				const { result } = event.target;
	            // 以二进制流方式读取得到整份excel表格对象
	            const workbook = XLSX.read(result, { type: 'binary' });
	            // 存储获取到的数据
	            let data = [];
	            // 遍历每张工作表进行读取（这里默认只读取第一张表）
	            for (const sheet in workbook.Sheets) {
		            // esline-disable-next-line
		            if (workbook.Sheets.hasOwnProperty(sheet)) {
		                // 利用 sheet_to_json 方法将 excel 转成 json 数据
		                data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
		                // break; // 如果只取第一张表，就取消注释这行
		            }
		        }
		        // 最终获取到并且格式化后的 json 数据
		        const uploadData = data.map(item=> {
		            return { 
		                pname : item['姓名'],
		                phone: item['手机'],
		                email: item['邮箱']
		            }
		        })
		        console.log(uploadData)//这里得到了后端需要的json数据，调用接口传给后端就行了
		        dispatch({
					type: 'prostaff/upload_list_personinformation',
					payload: {
						data: uploadData
					}
				});
		        message.success('上传成功！');
	        } catch (e) {
	            // 这里可以抛出文件类型错误不正确的相关提示
	            message.error('文件类型不正确！');
	        }
	    };
	    // 以二进制方式打开文件
	    fileReader.readAsBinaryString(files[0]);
	}
	
	//导出excel
	downloadExl = () => {
		const {
			prostaff: {
				data,
			},
		} = this.props;
	  	var option={};
	  	let dataTable = [];
	  	if(data) {
	    	for(let i in data.list) {
	      		if(data){
		        	let obj = {
			          '姓名': data.list[i].pname,
			          '手机': data.list[i].phone,
			          '邮箱': data.list[i].email,
			          '部门': data.list[i].dept,
			          '创建时间': moment(data.list[i].time).format('YYYY-MM-DD HH:mm:ss')
			        }
	        		dataTable.push(obj);
	      		}
	    	}
	  	}
		  option.fileName = '人员信息'
		  option.datas=[
		    {
		      sheetData:dataTable,
		      sheetName:'人员信息',
		      sheetHeader:['姓名','手机','邮箱','部门','创建时间'],
		      columnWidths: [10,10,10,10,10],
		      columnHeights: [10,10,10,10,10]
		    }
		  ];
		
		  var toExcel = new ExportJsonExcel(option); 
		  toExcel.saveExcel(); 
	}
	
	componentDidMount() {
		const { dispatch } = this.props;
		dispatch({
			type: 'prostaff/query_page_for_prostaff',
		});
		if(localStorage.getItem('auth_button') == "undefined") return false;
		const authButton = JSON.parse(localStorage.getItem('auth_button'));
		getNodeByNameAndCallbackProcess(authButton,"prostaff",(item,index,arr) => {
	    	if(item.children) {
	    		item.children.map((item,index) => {
	    			if(item.button_type == "add") {
	    				this.setState({
	    					addButtonVisible: 1,
	    				})
	    			}else if(item.button_type == "update") {
	    				this.setState({
	    					updateButtonVisible: 1,
	    				})
	    			}else if(item.button_type == "delete") {
	    				this.setState({
	    					deleteButtonVisible: 1,
	    				})
	    			}
	    		})
	    	}
	    })
	}

	handleStandardTableChange = (pagination, filtersArg, sorter) => {
		const { dispatch } = this.props;
		const { formValues } = this.state;
		
		this.setState({
			currentPage: pagination.current,
			pageSize: pagination.pageSize,
			selectedRows: [],
		})
		
		const filters = Object.keys(filtersArg).reduce((obj, key) => {
			const newObj = { ...obj
			};
			newObj[key] = getValue(filtersArg[key]);
			return newObj;
		}, {});

		const params = {
			currentPage: pagination.current,
			pageSize: pagination.pageSize,
			...formValues,
			...filters,
		};
		if(sorter.field) {
			params.sorter = `${sorter.field}_${sorter.order}`;
		}

		dispatch({
			type: 'prostaff/query_page_for_prostaff',
			payload: params,
		});
	};


	handleFormReset = () => {
		const { form,dispatch } = this.props;
		form.resetFields();
		this.setState({
				formValues: {},
				currentPage:1,
				selectedRows: [],
		});
		dispatch({
			type: 'prostaff/query_page_for_prostaff',
		});
	};

	toggleForm = () => {
		const { expandForm } = this.state;
		this.setState({
			expandForm: !expandForm,
		});
	};


	handleSelectRows = rows => {
		this.setState({
			selectedRows: rows,
		});
	};

	handleSearch = e => {
		e.preventDefault();

		const {
			dispatch,
			form
		} = this.props;

		form.validateFields((err, fieldsValue) => {
			if(err) return;

			const values = {
				...fieldsValue,
				updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
			};

			this.setState({
				currentPage:1,
				selectedRows: [],
				formValues: values,
			});

			dispatch({
				type: 'prostaff/query_page_for_prostaff',
				payload: values,
			});
		});
	};

	handleDeleteRecord = record => {
		const { dispatch } = this.props;
		const { currentPage,pageSize } = this.state;
		confirm({
	    title: '您确定要删除此员工吗?',
	    okText: '确认',
	    cancelText: '取消',
	    onOk() {
	        dispatch({
		        type: 'prostaff/delete_by_primarykey_for_prostaff',
		        payload: {
	        		recordid: record.id,
	        		currentPage,
        			pageSize,
		        },
		        callback: (res) => {
		        	if(res.success) {
		    				message.success('删除成功');
		        	}else {
		        		message.success('删除失败');
		        	}
		        }
	        });
	    },
	    onCancel() {},
	  });
	  
	  this.setState({
			selectedRows: [],
	   });

	};
	
	handleClose = removedTag => {
   		const dataNew = this.state.dataNew.filter(tag => tag.id !== removedTag.id);
		this.setState({ dataNew:[...dataNew] });
		this.setState({
	 		dataOption: [...this.state.dataOption,removedTag]
	 	})
  	};
  	
  	addColumnTag = (e) => {
	 	this.setState({
	 		dataNew: [...this.state.dataNew,e]
	 	})
	 	
	 	this.setState({
	 		dataOption: this.state.dataOption.filter((item)=> item.id !== e.id)
	 	})
	 }
  	
  	//------------------
  	
  	
  	 handleMouseMove = e => {
  	 	e.preventDefault ? e.preventDefault() : e.returnValue = false;
	   const { pointerMove } = this.state;
	   if (e.target.classList[0] !== 'ant-tag') {
	     return;
	   }
	
	   if (pointerMove) {
	     e.target.draggable = 'true';
	     return;
	   }
	
	   if (
	     document.activeElement.id !== undefined &&
	     document.activeElement.id !== null &&
	     document.activeElement.id !== ''
	   ) {
	     e.target.draggable = 'false';
	   } else {
	     e.target.draggable = 'true';
	     this.setState({ pointerMove: false });
	   }
//	
//	   console.log(pointerMove, 'pointerMove');
//	   console.log(e.target.draggable, 'e.target.draggable move');
	 };
	
	 handlePointerMove = e => {
	 	e.preventDefault ? e.preventDefault() : e.returnValue = false;
	   if (e.target.classList[0] === 'ant-input') {
	     this.setState({ pointerMove: true });
	   }
	 };
	
	 dragStart(e) {
	   this.dragged = e.currentTarget;
	 }
	
	 dragEnd(e){
	   const { dataNew } = this.state;
	   let { dataTemp } = this.state;
	   this.dragged.style.display = 'inline-block';
	   e.target.style.cursor = "move";
	   if (this.over === undefined || this.over === null) {
	     return;
	   }
	  
	   dataTemp = dataNew;
	   const from = Number(this.dragged.id) - 1;
	   const to = Number(this.over.id);
	
	   console.log(from, 'from');
	   console.log(to, 'to');
	   console.log(this.over.classList, 'this.over.classList');
	
	   if (from === to) {
	     if (this.over.classList.contains('drag-up')) {
	       dataTemp.splice(to === 0 ? to : to - 1, 0, dataTemp.splice(from, 1)[0]);
	     } else if (this.over.classList.contains('drag-down')) {
	       dataTemp.splice(to === dataTemp.length ? to : to - 1, 0, dataTemp.splice(from + 1, 1)[0]);
	     }
	   } else if (from !== to) {
	     if (this.over.classList.contains('drag-down')) {
	       dataTemp.splice(to === dataTemp.length ? to : to - 1, 0, dataTemp.splice(from, 1)[0]);
	     } else {
	       dataTemp.splice(to - 1, 0, dataTemp.splice(from, 1)[0]);
	     }
	   }
	
	   e.target.classList.remove('drag-up');
	   this.over.classList.remove('drag-up');
	
	   e.target.classList.remove('drag-down');
	   this.over.classList.remove('drag-down');
	
	   for (let i = 0; i < dataTemp.length; i += 1) {
	     dataTemp[i].sort = i + 1;
	   }
	   this.setState({ dataNew: [...dataTemp]});
	 }
	
	 dragOver(e) {
	 	e.preventDefault ? e.preventDefault() : e.returnValue = false;
	   this.dragged.style.display = 'none';
	   e.target.style.cursor = "move";
	   if (e.target.classList[0] !== 'ant-tag') {
	     return;
	   }
	   const dgIndex = JSON.parse(this.dragged.id);
	   const taIndex = JSON.parse(e.target.id);
	   const animateName = dgIndex > taIndex ? 'drag-up' : 'drag-down';
	
	   if (this.over && e.target.id !== this.over.id) {
	     this.over.classList.remove('drag-up', 'drag-down');
	   }
	
	   if (!e.target.classList.contains(animateName)) {
	     e.target.classList.add(animateName);
	     this.over = e.target;
	   }
	 }
	 
  	
  	//------------------
  	
  	
	
	//人员列表列排序设置
	handleSetByJobColumn = () => {
		this.handleModalVisibleByJobColumn(false);
	}
	handleModalVisibleByJobColumn = flag => {
		this.setState({
			modalVisibleByJobColumn: !!flag,
		});
	};

	renderSimpleForm() {
		const { form: {getFieldDecorator} } = this.props;
		return(
			<Form onSubmit={this.handleSearch} layout="inline">
		        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					<Col md={8} sm={24}>
				        <FormItem label="姓名">
				        	{getFieldDecorator('pname')(<Input placeholder="请输入" />)}
						</FormItem>
				    </Col>
				    <Col md={8} sm={24}>
					        <FormItem label="部门名称">
					        	{getFieldDecorator('dept')(<Input placeholder="请输入" />)}
							</FormItem>
					    </Col>
				    <Col md={8} sm={24}>
				        <span className={styles.submitButtons}>
				        <Button type="primary" htmlType="submit">
				        	查询
				        </Button>
				        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
				        	重置
				        </Button>
				        {/*<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
				        	展开 <Icon type="down" />
				        </a>*/}
				        </span>
			        </Col>
		        </Row>
	        </Form>
		);
	}

	renderAdvancedForm() {
		const {
			form: {
				getFieldDecorator
			},
		} = this.props;
		return(
			<Form onSubmit={this.handleSearch} layout="inline">
		        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					<Col md={8} sm={24}>
				        <FormItem label="姓名">
				        	{getFieldDecorator('pname')(<Input placeholder="请输入" />)}
						</FormItem>
				    </Col>
				    <Col md={8} sm={24}>
				        <FormItem label="部门名称">
				        	{getFieldDecorator('dept')(<Input placeholder="请输入" />)}
						</FormItem>
				    </Col>
		
		    	</Row>
			    <div style={{ overflow: 'hidden' }}>
					<div style={{ marginBottom: 24 }}>
					<Button type="primary" htmlType="submit">
			        查询
			        </Button>
			        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
			        重置
			        </Button>
			        <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
			        收起 <Icon type="up" />
			        </a>
		        	</div>
		        </div>
        </Form>
		);
	}

	renderForm() {
		const {
			expandForm
		} = this.state;
		return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
	}

	render() {
		console.log(this.props);
		const {
			prostaff: {
				data,
				selectDeptTree,
				selectOrganTree,
				authForUser,
			},
			loading,
		} = this.props;
		const {
			selectedRows,
			modalVisible,
			updateModalVisible,
			viewModalVisible,
			updateFormValues,
			viewFormValues,
			addButtonVisible,
			modalVisibleByJobColumn,
			dataNew,
			dataOption
		} = this.state;

		const downloadExlObj = {
			downloadExcel: this.downloadExcel
		};
		
		
		return(
			<PageHeaderWrapper title="员工信息列表">
			<Modal
			width={800}
			destroyOnClose
			title="编辑在职表列标题"
			bodyStyle={{padding: '0 24px 10px 24px'}}
			wrapClassName={styles.editStaffColumn}
			visible={modalVisibleByJobColumn}
			onOk={this.handleSetByJobColumn}
			onCancel={() => this.handleModalVisibleByJobColumn(false)}
			>
				<h3 className={styles.staffColumnTitle}>自定义列标题区域<span style={{fontSize: '12px',paddingLeft: '10px'}}>(可以拖拽排序)</span></h3>
				<div onDragOver={e => this.dragOver(e)}>
					{dataNew.map((item, index) => {
			          const isLongTag = item.length > 20;
			          const tagElem = item.id < 5?(
			            <Tag 
			            id={index + 1}
			            key={item.id} 
			            closable={false} 
			            onClose={() => this.handleClose(item)} 
			            className={styles.staffColumnTag}
						draggable={e => (!e ? 'true' : e.target.draggable)}
				       	onDragEnd={e => this.dragEnd(e)}
				       	onDragStart={e => this.dragStart(e)}
				       	onMouseMove={e => this.handleMouseMove(e)}
				       	onPointerMove={e => this.handlePointerMove(e)}
			            >
			              {isLongTag ? `${item.name.slice(0, 20)}...` : item.name}
			            </Tag>
			          ):(
			          	<Tag 
			            id={index + 1}
			            key={item.id} 
			            closable={true}
			            color="#108ee9"
			            onClose={() => this.handleClose(item)} 
			            className={styles.staffColumnTagAdd}
						draggable={e => (!e ? 'true' : e.target.draggable)}
				       	onDragEnd={e => this.dragEnd(e)}
				       	onDragStart={e => this.dragStart(e)}
				       	onMouseMove={e => this.handleMouseMove(e)}
				       	onPointerMove={e => this.handlePointerMove(e)}
			            >
			              {isLongTag ? `${item.name.slice(0, 20)}...` : item.name}
			            </Tag>
			          );
			          return isLongTag ? (
			            <Tooltip title={item.name} key={item.id}>
			              {tagElem}
			            </Tooltip>
			          ) : (
			            tagElem
			          );
			        })}
				</div>
				<h3 className={styles.staffColumnOption}>字段备选区</h3>
				{dataOption.map((item, index) => {
			          const isLongTag = item.length > 20;
			          const tagElem = (
			            <Tag 
			            id={index + 1}
			            key={item.id} 
			            closable={false} 
			            onClose={() => this.handleClose(item)} 
			            onClick={() => this.addColumnTag(item)} 
			            className={styles.staffOptionColumnTag}
			            >
			           	<div className={styles.addOptionTag}>添加</div>
			              {isLongTag ? `${item.name.slice(0, 20)}...` : item.name}
			            </Tag>
			          );
			          return isLongTag ? (
			            <Tooltip title={item.name} key={item.id}>
			              {tagElem}
			            </Tooltip>
			          ) : (
			            tagElem
			          );
			    })}
			</Modal>
            <Card bordered={false}>
            <div className={styles.proUsertableList}>
            <div className={styles.proUsertableListForm}>{this.renderForm()}</div>
            <div className={styles.proUsertableListOperator}>
            {addButtonVisible == 1?(
            	<Button icon="plus" type="primary" onClick={() => router.push(`/staff/newstaff`)}>
        		新增
        		</Button>
        	):null}
            <Button icon="download" className={styles.downloadButton} onClick={this.downloadExl}>
    			导出
    		</Button>
            <Button icon="upload" type="primary" className={styles.upload_wrap}>
            	<span style={{cursor: 'pointer'}}>导入</span>
				<Input className={styles.file_uploader}type='file' accept='.xlsx, .xls' onChange={this.onImportExcel}/>    		
        	</Button>
            {/*<ReactHTMLTableToExcel
                id="test-table-xls-button"
                className={styles.downloadButton}
                table="table-to-xls"
                filename="人员信息表" 
                sheet="人员信息表"
                buttonText={<div><Icon type="download" style={{marginRight: '5px'}}/>导出</div>}>
            </ReactHTMLTableToExcel>*/}
            {/*<Icon type="setting" style={{fontSize: '20px',color: '#c0c4cc',marginTop: '15px',float: 'right',cursor: 'pointer'}} onClick={()=>this.handleModalVisibleByJobColumn(true)}/>*/}
    </div>
        <StandardTable
        rowKey={"staff_id"}
        selectedRows={selectedRows}
        loading={loading}
        data={data}
        columns={this.columns}
        onSelectRow={this.handleSelectRows}
        onChange={this.handleStandardTableChange}
        {...downloadExlObj}
        />
        </div>
        </Card>

    </PageHeaderWrapper>
		);
	}
}

export default ProStaffList;